body{
	background: #fff;
	text-align: justify
}

h1{
	margin-top: 5px;
	margin-bottom: 5px;
	font-family: 'Roboto', sans-serif;
	color: #1362a3;
}

h2{
	margin: 0;
	padding: 0;
}

p{
	font-family: 'Fira Sans', sans-serif;
	letter-spacing: 1.0px;
}

li span {
	color:#1362a3;
	font-weight: bold;
}

ul{
	padding-left: 0;
	list-style-type: none;
	line-height: 1.4;
}

hr{
	border:solid #1362a3 0.5px;
}

a{
    color: #1362a3;
}

a:visited{
    color: hotpink;
}

button{
	margin-bottom: 4%;
	background-color: white;
	border: none;
	padding: 15px 32px;
    text-align: center;
    opacity: 0.9;
    -webkit-box-shadow: 1px 1px 9px -1px rgba(23,28,117,1);
	-moz-box-shadow: 1px 1px 9px -1px rgba(23,28,117,1);
	box-shadow: 1px 1px 9px -2px rgba(23,28,117,1);
	cursor: pointer;
}


video{
	max-width: 100%;
	filter:grayscale(0%);
	-moz-filter:grayscale(0%);
	-webkit-filter: grayscale(0%);
}

.img-img{
	width: 100%;
}

.logo-wrapper{
	display:inline-block;
}

.programming-logo{
	width: 30%;
	float:left;
	margin: 1%;
	border-style: solid;
	border-radius: 100%;
	border-width: 1px;
	border-color: rgba(23,28,117,1);
	box-shadow: 1px 1px 9px -2px rgba(23,28,117,1);
}


.grey{
	filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-webkit-filter: grayscale(100%);
}

.grey:hover{
	filter:grayscale(0%);
	-moz-filter:grayscale(0%);
	-webkit-filter: grayscale(0%);
}

.grid-img{
	width: 49%;
	margin: 0.5%;
	float: left;
	display: inline-block;
}

#main-box{
	background: #fff;
	max-width:600px; 
	margin-left: auto;
	margin-right: auto;
	padding: 2%;
	padding-bottom: 1%;
	-webkit-box-shadow: 1px 1px 18px -2px rgba(23,28,117,1);
	-moz-box-shadow: 1px 1px 18px -2px rgba(23,28,117,1);
	box-shadow: 1px 1px 18px -2px rgba(23,28,117,1);
}

#personal-desctiption{
	width: 50%;
	margin: 0;
	padding:0;
	float:left;
}

#first-img{
	width: 49%;
	float: right;
	display: inline;
	margin-left: 1%;
}

#impressum{
	font-size: 60%;
}


@media only screen and (max-width: 700px) {
    .grey {
        -webkit-filter: grayscale(0%);
		filter: grayscale(0%);

    }
}

@media only screen and (max-width: 400px) {
	body{
		text-align: left;
	}
	
	#first-img{
	width: 100%;
	float: right;
	display: inline;
	}

	#personal-desctiption{
	width: 100%;
	margin: 0;
	padding:0;
	float:left;
	}
}